import React,{useState} from 'react'
import { useNavigate } from 'react-router-dom'

export default function Add() {
  const navigate = useNavigate()

  const [stu,setStu] = useState({
    name:'',
    age:'',
    phone:'',
    email:''
  })

  function updateStu(e,key){
    if(!key){
      return false
    }
    let newStu = {...stu}
    newStu[key] = e.trim()
    setStu(newStu)
  }
  function submitInfo(e){
    e.preventDefault()
    navigate('/home',{
      state:{
        a:'1',
        b:'2'
      }
    })
  }

  return (
    <div className='container'>
      <h1 className="page-header">添加用户</h1>
      <form id="myForm" onSubmit={submitInfo}>  
        <div className="well">
          <div className="form-group">
            <label>姓名</label>
            <input type="text"
              className='form-control'
              placeholder='请填写用户姓名'
              value={stu.name}
              onChange={(e)=>updateStu(e.target.value,'name')}
            />
          </div>
          <div className="form-group">
            <label>年龄</label>
            <input type="text"
              className='form-control'
              placeholder='请填写年龄'
              value={stu.age}
              onChange={(e)=>updateStu(e.target.value,'age')}
            />
          </div>
          <button type="submit" className='btn btn-primary'>确认添加</button>
        </div>
      </form>
    </div>
  )
}
